<style type="text/css">
    .trhead td {
        background: #efefef;
        text-align: center
    }

    .trbody td {
        text-align: center;
        vertical-align: top;
        border-left: 1px solid #f2f2f2;
        overflow: hidden;
        font-size: 12px;
    }

    .ops {
        border-right: 1px solid #f2f2f2;
        text-align: center;
    }

    .ops a, .ops span {
        margin: 3px 0;
    }

    .table-top .op:hover {
        color: #000;
    }

    .tables {
        border: 1px solid #e5e5e5;
        font-size: 14px;
        line-height: 18px;
    }

    .tables:hover {
        border: 1px solid #b1d8f5;
    }

    .table-row {
        display: flex;
        justify-content: center;
        align-content: space-around;
    }

    .table-row:hover {
        background-image: linear-gradient(270deg, rgba(216, 234, 252, .124), rgba(118, 174, 255, .12) 51%, rgba(198, 213, 244, .088));
    }

    .table-row:last-child {
        border: none !important;
    }

    .tables .table-row > div {
        padding: 20px 15px !important;
    }

    .tables .table-row > div.columnFlex {
        padding: 0 !important;
    }

    .tables .table-row.table-top > div {
        margin: 0 !important;
        padding: 16px 0;
    }

    .tables .table-row .ops.list-inner {
        border-right: none;
    }

    .tables .list-inner {
        border-right: 1px solid #efefef;
        vertical-align: middle;
    }

    .table-row .goods-des .title {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table-row .goods-des {
        width: 300px;
        border-right: 1px solid #efefef;
        vertical-align: middle;
    }

    .table-row .list-inner {
        flex: 1;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .saler > div {
        width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .table-row .list-inner.ops, .table-row .list-inner.paystyle {
        flex-direction: column;
        justify-content: center;
    }

    .table-footer > div, .table-top > div {
        flex: 1;
        height: 100%;
    }

    .fixed-header div {
        padding: 0;
    }

    .columnFlex {
        display: flex;
        flex-direction: column;
    }

    .qa-rank .answers {
        padding-top: 3px;
        width: 60px;
        height: 60px;
        border-radius: 3px;
    }

    .qa-rank .answers {
        background-color: #f3f3f3;
        border-color: #f3f3f3;
        color: #7b7b7b;
    }

    .qa-rank .answered {
        color: #0084ff;
        background: rgba(0, 132, 255, .1);
        border: none;
    }

    .category-title {
        float: left;
        line-height: 22px;
        border: 1px solid #0084ff;
        padding: 0 6px;
        border-radius: 6px;
        margin-right: 6px;
        color: #0084ff;
        font-size: 14px;
    }

    .tag {
        display: inline-block;
        padding: 0 8px;
        height: 26px;
        line-height: 26px;
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        color: #0084ff !important;
        background: rgba(0, 132, 255, .1);
        border-radius: 3px;
    }
    .desc .split{
        margin: 0 4px;
    }
    .desc .split::before {
        content: "·";
        color: rgb(221, 221, 221);
    }
    .desc span {
        color: #999;
        font-size: 14px;
    }
    .desc span .icon{
        font-size: 13px;
    }
</style>

<form action="" method="get" class="form-horizontal table-search" role="form">
    <div class="page-toolbar">
        <div class="col-sm-3">
            {if $communication_status == 1}
            <a class="btn btn-primary btn-sm" href="{:webUrl('college/add')}"><i class="icon icon-plus"></i> 添加文章</a>
            {/if}
        </div>
        <div class="col-md-9 input-group">
            <div class="input-group-select">
                <select name="type" class="form-control">
                    <option value="">选择排序方式</option>
                    <option value="new" {if $_GET['type']== 'new'}selected{/if}>最新</option>
                    <option value="hot" {if $_GET['type']== 'hot'}selected{/if}>最热</option>
                </select>
            </div>
            <input type="hidden" class="form-control " name="do" value="{$do}">
            <input type="text" class="form-control " name="keyword" value="{$_GPC['keyword']}" placeholder="搜索文章关键词信息查找">
            <span class="input-group-btn">
                    <button class="btn btn-primary" type="submit"> 搜索</button>
                </span>
        </div>
    </div>
</form>

{if empty($list)}
<!-- <div class="panel panel-default"> -->
<!--     <div class="panel-body empty-data">未查询到相关数据</div> -->
<!-- </div> -->
{else}

{/if}

<div class="row">
    <div class="col-md-12">

        <div class="tables">

            {foreach $list as $key => $row}
            <div class="table-row" style="margin:0  20px;border-bottom: 1px solid #eee;">

                <div class="goods-des" style="flex: 3;text-align: left;">

                    <div style="display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;margin: 10px 0">

                        <div style="width:60px;height: 60px;border:1px solid #efefef; padding:1px;" class="qa-rank">
                            <div class="answers flex-column-center answered">
                                {$row['likenum']} <small> 点赞</small>
                            </div>
                        </div>

                        <div style="-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;margin-left: 10px;text-align: left;display: flex;align-items: center">
                            <div class="flex-column-around" style="height: 60px;">
                                <div class="title flex-start-center">
                                    <!-- <span class="category-title">【{$row['category_name']}】</span> -->
                                    {if $key < 3}
                                    <a data-toggle='ajaxModal' href="{:webUrl('college/view', array('id' => $row['id']))}" style="margin-left: 6px;font-weight:normal;text-decoration:none;background-image: linear-gradient(90deg, #3f8cff 0%, #ff3f3f 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">{$row['title']}</a>
                                    {else}
                                    <a data-toggle='ajaxModal' href="{:webUrl('college/view', array('id' => $row['id']))}" style="margin-left: 6px;font-weight:normal;text-decoration:none;">{$row['title']}</a>
                                    {/if}
                                    <div class="tags" style="margin-left: 20px;">
                                        {foreach $row['labels'] as $key1 => $label}
                                        <a href="{:webUrl('college/' . $action, array('keyword' => '#'.$label))}" class="tag"># {$label}</a>
                                        {/foreach}
                                    </div>
                                </div>
                                <div class="desc">
                                    <span>{$row['author']}</span>
                                    <span class="split"></span>
                                    <span>{$row['showtime']}</span>
                                    <span class="split"></span>
                                    <span><span class="icon icon-eye" style="margin-right: 4px;"></span>{$row['viewcount']}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <!----------------------columnFlex---------------------------------------------->
                {if $isMine}
                <div class="list-inner columnFlex" style="line-height:20px;text-align:center">
                    <div>
                        {if $row['enabled'] == 1}
                        <span class="text-success">已发布</span>
                        {else}
                        <span class="text-danger">审核中</span>
                        {/if}
                    </div>
                </div>
                {/if}

                <div class="ops list-inner columnFlex" style="line-height:20px;text-align:center">
                    <div>
                        <a class="text-info" data-toggle='ajaxModal' href="{:webUrl('college/view', array('id' => $row['id']))}">查看详情</a>
                    </div>
                </div>

            </div>
            {/foreach}

            <div style="padding: 20px;text-align: right">
                {$pager|raw}
            </div>

        </div>

    </div>
</div>